<template>
  <view class="container">
    <!-- 轮播图 -->
    <view class="banner-section">
      <swiper class="banner-swiper" indicator-dots autoplay circular>
        <swiper-item v-for="(banner, index) in banners" :key="index">
          <image :src="banner.image" class="banner-image" mode="aspectFill" />
          <view class="banner-text">
            <text class="banner-title">{{ banner.title }}</text>
            <text class="banner-desc">{{ banner.description }}</text>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 快速入口 -->
    <view class="quick-entry">
      <view class="entry-item" @click="goToBooking">
        <view class="entry-icon">🏸</view>
        <text class="entry-text">立即预订</text>
      </view>
      <view class="entry-item" @click="goToMyBookings">
        <view class="entry-icon">📅</view>
        <text class="entry-text">我的预订</text>
      </view>
      <view class="entry-item" @click="goToAbout">
        <view class="entry-icon">ℹ️</view>
        <text class="entry-text">场馆介绍</text>
      </view>
      <view class="entry-item" @click="goToNews">
        <view class="entry-icon">📰</view>
        <text class="entry-text">场馆资讯</text>
      </view>
    </view>

    <!-- 场馆介绍 -->
    <view class="section" v-if="venue">
      <view class="section-header">
        <text class="section-title">场馆介绍</text>
        <text class="section-more" @click="goToAbout">更多 ></text>
      </view>
      <view class="venue-intro">
        <image :src="venue.coverImage || '/static/venue.jpg'" class="venue-image" mode="aspectFill" />
        <view class="venue-info">
          <text class="venue-name">{{ venue.name }}</text>
          <text class="venue-desc">{{ venue.description }}</text>
          <view class="venue-features">
            <text class="feature-item">🏸 {{ venue.courtCount }}个专业场地</text>
            <text class="feature-item">👥 {{ venue.memberCount }}+ 会员</text>
            <text class="feature-item">⭐ {{ venue.rating }} 评分</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 场地列表 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">场地列表</text>
        <text class="section-more" @click="goToAllCourts">查看全部 ></text>
      </view>
      <view class="court-list">
        <view class="court-item" v-for="(court, index) in courtList" :key="index" @click="goToCourtDetail(court)">
          <image :src="court.image" class="court-image" mode="aspectFill" />
          <view class="court-info">
            <text class="court-name">{{ court.name }}</text>
            <text class="court-desc">{{ court.description }}</text>
            <view class="court-meta">
              <text class="court-price">¥{{ court.price }}/小时</text>
              <text class="court-status" :class="court.status === 1 ? 'available' : 'booked'">
                {{ court.status === 1 ? '可预订' : '已预订' }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 最新资讯 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">最新资讯</text>
        <text class="section-more" @click="goToNews">更多 ></text>
      </view>
      <view class="news-list">
        <view class="news-item" v-for="(news, index) in newsList" :key="index" @click="goToNewsDetail(news)">
          <image :src="news.image" class="news-image" mode="aspectFill" />
          <view class="news-content">
            <text class="news-title">{{ news.title }}</text>
            <text class="news-desc">{{ news.description }}</text>
            <text class="news-time">{{ formatTime(news.createTime) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 活动推广 -->
    <view class="section">
      <view class="promotion-card" @click="goToPromotion">
        <view class="promotion-content">
          <text class="promotion-title">新用户专享优惠</text>
          <text class="promotion-desc">首次预订享受8折优惠，快来体验吧！</text>
          <view class="promotion-btn">立即预订</view>
        </view>
        <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" class="promotion-image" mode="aspectFill" />
      </view>
    </view>
  </view>
</template>

<script>
import { getHomeData } from '../../api/home.js'

export default {
  data() {
    return {
      banners: [],
      newsList: [],
      courtList: [],
      venue: null
    }
  },
  onLoad() {
    this.loadHomeData()
  },
  onPullDownRefresh() {
    this.loadHomeData()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  methods: {
    async loadHomeData() {
      try {
        uni.showLoading({ title: '加载中...' })
        const result = await getHomeData()
        if (result.code === 200) {
          const data = result.data
          this.banners = data.banners || []
          this.newsList = data.latestNews || []
          this.courtList = data.hotCourts || []
          this.venue = data.venue
        } else {
          uni.showToast({
            title: result.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载首页数据失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date

      // 小于1小时
      if (diff < 3600000) {
        const minutes = Math.floor(diff / 60000)
        return `${minutes}分钟前`
      }

      // 小于24小时
      if (diff < 86400000) {
        const hours = Math.floor(diff / 3600000)
        return `${hours}小时前`
      }

      // 小于7天
      if (diff < 604800000) {
        const days = Math.floor(diff / 86400000)
        return `${days}天前`
      }

      // 超过7天显示具体日期
      return date.toLocaleDateString()
    },

    goToBooking() {
      uni.navigateTo({ url: '/pages/court/all' })
    },

    goToMyBookings() {
      uni.switchTab({ url: '/pages/booking/my' })
    },

    goToNews() {
      uni.navigateTo({ url: '/pages/news/list' })
    },

    goToAbout() {
      uni.navigateTo({ url: '/pages/about/about' })
    },

    goToAllCourts() {
      uni.navigateTo({ url: '/pages/court/all' })
    },

    goToCourtDetail(court) {
      uni.navigateTo({
        url: `/pages/court/detail?id=${court.id}`
      })
    },

    goToNewsDetail(news) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${news.id}`
      })
    },

    goToPromotion() {
      uni.navigateTo({ url: '/pages/promotion/promotion' })
    }
  }
}
</script>

<style scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 轮播图 */
.banner-section {
  height: 200px;
  margin-bottom: 20px;
}

.banner-swiper {
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 20px;
  color: white;
}

.banner-title {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.banner-desc {
  font-size: 14px;
  opacity: 0.9;
}

/* 快速入口 */
.quick-entry {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  background: white;
  margin-bottom: 20px;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.entry-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.entry-text {
  font-size: 14px;
  color: #333;
}

/* 通用区块 */
.section {
  background: white;
  margin-bottom: 20px;
  padding: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.section-more {
  font-size: 14px;
  color: #07c160;
}

/* 场馆介绍 */
.venue-intro {
  display: flex;
  align-items: center;
}

.venue-image {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  margin-right: 15px;
}

.venue-info {
  flex: 1;
}

.venue-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.venue-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  display: block;
  margin-bottom: 10px;
}

.venue-features {
  display: flex;
  flex-wrap: wrap;
}

.feature-item {
  font-size: 12px;
  color: #07c160;
  background: #f0f9ff;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 8px;
  margin-bottom: 4px;
}

/* 资讯列表 */
.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.news-image {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  margin-right: 12px;
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  line-height: 1.3;
  margin-bottom: 5px;
}

.news-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.3;
  margin-bottom: 5px;
}

.news-time {
  font-size: 12px;
  color: #999;
}

/* 场地列表 */
.court-list {
  display: flex;
  flex-direction: column;
}

.court-item {
  display: flex;
  margin-bottom: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.court-image {
  width: 100px;
  height: 75px;
  border-radius: 6px;
  margin-right: 12px;
}

.court-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.court-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.court-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.3;
  margin-bottom: 8px;
}

.court-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.court-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b35;
}

.court-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}

.court-status.available {
  background: #e8f5e8;
  color: #52c41a;
}

.court-status.booked {
  background: #fff2e8;
  color: #fa8c16;
}

/* 活动推广 */
.promotion-card {
  display: flex;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
  position: relative;
  overflow: hidden;
}

.promotion-content {
  flex: 1;
  z-index: 1;
}

.promotion-title {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
}

.promotion-desc {
  font-size: 14px;
  opacity: 0.9;
  display: block;
  margin-bottom: 15px;
  line-height: 1.4;
}

.promotion-btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  display: inline-block;
}

.promotion-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-left: 15px;
}
</style>
